<template>
  <div class="home-page">
    <goga-header title="果加果加" orange>
      <div slot="left" >
        <icon symbol="location" ></icon>
        <span v-if="!locationDisable&&location.name === ''">定位中...</span>
        <span v-if="!locationDisable&&location.name !== ''">{{location.name}}</span>
        <span v-if="locationDisable">定位失败</span>
      </div>
    </goga-header>
    <div>
      <div v-if="firstLoader"><img src="../../assets/home-loader-01.svg" alt="" class="page-loader"></div>
      <div v-if="!firstLoader">
        <nav class="home-nav">
          <router-link :to="{name:'cate',params:{id:0}}">
            <div class="p-icon">
              <icon symbol="yzyg"></icon>
            </div>
            <div class="p-title">一周一果</div>
          </router-link>
          <router-link :to="{name:'cate',params:{id:1}}">
            <div class="p-icon">
              <icon symbol="zxsg"></icon>
            </div>
            <div class="p-title">自选水果</div>
          </router-link >
          <router-link :to="{name:'cate',params:{id:2}}">
            <div class="p-icon">
              <icon symbol="kzgh"></icon>
            </div>
            <div class="p-title">馈赠果盒</div>
          </router-link>
          <router-link :to="{name:'cate',params:{id:3}}">
            <div class="p-icon">
              <icon symbol="mxd"></icon>
            </div>
            <div class="p-title">没想稻</div>
          </router-link>
          <router-link :to="{name:'cate',params:{id:4}}">
            <div class="p-icon">
              <icon symbol="ogxl"></icon>
            </div>
            <div class="p-title">瓯柑系列</div>
          </router-link>
          <router-link :to="{name:'cate',params:{id:5}}">
            <div class="p-icon">
              <icon symbol="yzyh"></icon>
            </div>
            <div class="p-title">一周一花</div>
          </router-link>
          <router-link :to="{name:'cate',params:{id:6}}">
            <div class="p-icon">
              <icon symbol="jphs"></icon>
            </div>
            <div class="p-title">精品花束</div>
          </router-link>
          <router-link :to="{name:'520hd'}">
            <div class="p-icon">
              <icon symbol="lq"></icon>
            </div>
            <div class="p-title">领券</div>
          </router-link>
        </nav>
        <div class="home-slider">
          <slider
            :pagination-visible="true"
            :repeating="true"
            :slides="bannerList"
            :auto="5000">
            <div v-for="(item,index) in bannerList" :key="index">
              <a :href="item.cWeUrl">
                <img  :src="item.cPic" />
              </a>
            </div>
          </slider>
        </div>
      </div>
    </div>

    <h1 class="home-title">附近的店铺</h1>
    <div class="shop-wrapper">
      <img v-if="shopLoading&&!locationDisable" class="loading" src="../../assets/loding.gif" alt="">
      <div class="shop-list-empty" v-if="locationDisable">
        很抱歉，无法获取位置
      </div>
      <div class="shop-list">
        <router-link :to="{name:'shop',params: {shopId: item.warehouseSn}}" class="item bot-line" v-for="(item,index) in shopList" :key="index">
          <div class="p-pic"  v-lazy:background-image="'http://www.gogagoga.cc/picfile/'+item.wPic">
          </div>
          <div class="p-txt">
            <div class="p-tit">
              {{item.wName}}
            </div>
            <div class="p-other">
              {{item.wAddress}}
            </div>
            <div class="p-other">
              <span>起送￥68 </span>
              <span>{{item.rangeDetail}}</span>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <footer-nav></footer-nav>
  </div>
</template>

<script lang="babel">
  import gogaHeader from '@components/goga-header'
  import footerNav from '@components/footer-nav'
  import store2 from 'store2'
  import {isWechat, wechatConfig} from '@utils'
  import Icon from '@components/icon'
  import Slider from '@components/vue-slider'
  import { mapGetters } from 'vuex'


  const fetchBannerData = async (store) => {
    return await store.dispatch('backend/home/getBannerList')
  }
  const initLocation = async (store, {latitude, longitude}) => {
    await store.dispatch('global/user/getLocation', {latitude, longitude})
  }
  const fetchShopData = async (store, {latitude, longitude}) => {
    await store.dispatch('backend/home/getShopList', {latitude, longitude})
  }
  export default {
    components: {
      Icon,
      gogaHeader,
      Slider,
      footerNav
    },
    data () {
      return {
        locationDisable: false,
        shopLoading: false,
        firstLoader: true
      }
    },
    computed: {
      ...mapGetters({
        bannerList: 'backend/home/getBanner',
        location: 'global/user/getLocation',
        shopList: 'backend/home/getShop',
      })
    },
    async mounted () {
      let _this= this;
      if(this.shopList.length==0) {
        this.shopLoading = true;
      }
      if(this.bannerList.length == 0) {
        await fetchBannerData(this.$store);
      }
      this.firstLoader = false;
      if(isWechat()) {
        wechatConfig()
          .then(function () {
            wx.ready(function(){
              wx.getLocation({
                type: 'wgs84',
                success: function (res) {
                  let latitude = res.latitude;
                  let longitude = res.longitude;
                  _this.init(latitude, longitude)
                },
                cancel: function () {
                  _this.locationDisable = true
                },
                error: function () {
                  _this.locationDisable = true
                }
              });
            })
          })
      } else {
        navigator.geolocation.getCurrentPosition(function (location) {
          var latitude = location.coords.latitude;
          var longitude = location.coords.longitude;
          _this.init(latitude, longitude)
        }, function () {
          _this.locationDisable = true
        })
      }
    },
    methods: {
      async init(latitude, longitude) {
        if(this.location.name === '') {
          await initLocation(this.$store, {latitude, longitude});
        }
        if(this.shopList.length == 0) {
          await fetchShopData(this.$store, {latitude, longitude})
        }
        this.shopLoading = false
      }
    }
  }
</script>

<style lang="less">
  @import "index.less";
</style>
